<!DOCTYPE html>
<html>
<!-- sadfasdfsadfasdfasdfasdfassassadfasdfdfasdfdfasasdfasddff -->

<head>
    <meta charset="UTF-8">
    <title>Basic Layout - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="../jquery-easyui-1.6.6/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../jquery-easyui-1.6.6/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../jquery-easyui-1.6.6/demo.css">
    <script type="text/javascript" src="../jquery-easyui-1.6.6/jquery.min.js"></script>
    <script type="text/javascript" src="../jquery-easyui-1.6.6/jquery.easyui.min.js"></script>
    <script src="../js/jquery.serializejson.min.js"></script>
</head>

<body>
    
    <div class="easyui-layout" data-options="fit:true">
        <!-- <div data-options="region:'north'" style="height:50px">
            <div class="easyui-panel" style="padding:5px;">
                <a href="#" class="easyui-linkbutton" data-options="plain:true">Home</a>
                <a href="#" class="easyui-menubutton" data-options="menu:'#mm1',iconCls:'icon-edit'">Edit</a>
                <a href="#" class="easyui-menubutton" data-options="menu:'#mm2',iconCls:'icon-help'">Help</a>
                <a href="#" class="easyui-menubutton" data-options="menu:'#mm3'">About</a>
            </div>
            <div id="mm1" style="width:150px;">
                <div data-options="iconCls:'icon-undo'">Undo</div>
                <div data-options="iconCls:'icon-redo'">Redo</div>
                <div class="menu-sep"></div>
                <div>Cut</div>
                <div>Copy</div>
                <div>Paste</div>
                <div class="menu-sep"></div>
                <div>
                    <span>Toolbar</span>
                    <div>
                        <div>Address</div>
                        <div>Link</div>
                        <div>Navigation Toolbar</div>
                        <div>Bookmark Toolbar</div>
                        <div class="menu-sep"></div>
                        <div>New Toolbar...</div>
                    </div>
                </div>
                <div data-options="iconCls:'icon-remove'">Delete</div>
                <div>Select All</div>
            </div>
            <div id="mm2" style="width:100px;">
                <div>Help</div>
                <div>Update</div>
                <div>About</div>
            </div>
            <div id="mm3" class="menu-content" style="background:#f0f0f0;padding:10px;text-align:left">
                <img src="http://www.jeasyui.com/images/logo1.png" style="width:150px;height:50px">
                <p style="font-size:14px;color:#444;">Try jQuery EasyUI to build your modern, interactive, javascript
                    applications.</p>
            </div>

        </div> -->
        <!-- <div data-options="region:'west',split:true" title="目录" style="width:200px;">

            <div class="easyui-accordion" data-options="fit:true">
                <div title="About" data-options="iconCls:'icon-ok'" style="overflow:auto;padding:10px;">
                    <h3 style="color:#0099FF;">Accordion for jQuery</h3>
                    <p>Accordion is a part of easyui framework for jQuery. It lets you define your accordion component
                        on web page more easily.</p>
                </div>
                <div title="Help" data-options="iconCls:'icon-help'" style="padding:10px;">
                    <p>The accordion allows you to provide multiple panels and display one or more at a time. Each
                        panel has built-in support for expanding and collapsing. Clicking on a panel header to expand
                        or collapse that panel body. The panel content can be loaded via ajax by specifying a 'href'
                        property. Users can define a panel to be selected. If it is not specified, then the first panel
                        is taken by default.</p>
                </div>
                <div title="TreeMenu" data-options="iconCls:'icon-search'" style="padding:10px 0;">
                    <ul class="menu">
                        <li><a href="javascript:void(0)" link="./components/comment.html">评论管理</a></li>
                        <li><a href="javascript:void(0)" link="./components/cate.html">分类管理</a></li>
                        <li><a href="javascript:void(0)" link="./components/news.html">新闻管理</a></li>
                        <li><a href="javascript:void(0)" link="./components/product.html">产品管理</a></li>
                    </ul>
                </div>
            </div>
            



        </div> -->
       <!--  <div data-options="region:'center',iconCls:'icon-ok'"> -->
            <table id="dg" class="easyui-datagrid" data-options="singleSelect:true,url:'datagrid_data1.json',method:'get',fit:true"
            pagination="true" idField="itemid" 
            ></table>
            <!-- <table class="easyui-datagrid" data-options="url:'datagrid_data1.json',method:'get',border:false,singleSelect:true,fit:true,fitColumns:true">
                <thead>
 


                    <tr>
                        <th data-options="field:'itemid',align:'center'" width="60">ID</th>
                        <th data-options="field:'productid',align:'center'" width="60">是否匿名</th>
                        <th data-options="field:'listprice',align:'center'" width="80">评论对象</th>
                        <th data-options="field:'unitcost',align:'center'" width="140">评论内容</th>
                        <th data-options="field:'attr1',align:'center'" width="80">评论时间</th>
                        <th data-options="field:'status',align:'center'" width="60">评论状态</th>
                        <th data-options="field:'status',align:'center'" width="60">评论状态</th>
                    </tr>
                </thead>
            </table> -->
            <div id="dlg" class="easyui-dialog" title="Basic Dialog" data-options="closed:true,iconCls:'icon-save'" style="width:400px;height:350px;padding:15px">
                <form id="ff" class="easyui-form" method="post" data-options="novalidate:true" >
                    <input type="hidden"  name="_id"/>
                    
                    <div style="margin-bottom:30px">
                        <input class="easyui-checkbox" value="true" id="anonymity" type="checkbox"  name="anonymity" style=" display: inline-block;" data-options="label:'是否过审:'">
                    </div>
                    <div style="margin-bottom:30px">
                        <input class="easyui-textbox" name="name" style="width:90%; display: inline-block;" data-options="label:'名称:',required:true">
                    </div>
                    <!-- <div style="margin-bottom:20px">
                        <input class="easyui-textbox" name="email" style="width:90%" data-options="label:'Email:',required:true,validType:'email'">
                    </div>
                    <div style="margin-bottom:20px">
                        <input class="easyui-textbox" name="subject" style="width:90%" data-options="label:'Subject:',required:true">
                    </div> -->
                    <div style="margin-bottom:20px">
                        <input class="easyui-textbox" name="content" style="width:90%;height:60px" data-options="label:'内容:',multiline:true">
                    </div>
                    <div style="margin-bottom:30px">
                        <input class="easyui-datebox" name="time" style="width:90%; display: inline-block;" data-options="label:'时间:',required:true">
                    </div>
                   
                </form>
                <div style="text-align:center;padding:5px 0">
                    <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()" style="width:80px">Submit</a>
                    <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()" style="width:80px">Clear</a>
                </div>
            </div>
        </div>
    <!-- </div> -->


</body>

<script>
     $(".menu li a").click(function(){
        var title = $(this).text();
        var link = $(this).attr('link');
        $('#tt').tabs('add',{
            title: title,
            fit:true,
            content: '<iframe scrolling="auto" frameborder="0" src="'+ link +'" width="100%" height="100%"></iframe>',
            closable: true
        });

    })



    $('#dg').datagrid({
        url: 'http://127.0.0.1:3000/comment/list',
        method: 'post',
        fit: true,
        // singleSelect: false, //允许选择多行
        // selectOnCheck: true,//true勾选会选择行，false勾选不选择行, 1.3以后有此选项。重点在这里
        checkOnSelect: true,
        singleSelect:false,
        columns: [[
        /* <th field="ck" checkbox="true"></th>
        <th field="itemid" width="80">Item ID</th> */

            // { field: 'checkbox', width: 100},
            { field: 'ck', checkbox:true, width: 100},
            // { field: '_id',title: 'id', width: 100},
            { field: 'anonymity', title: '是否通过审核', width: 100 },
            { field: 'name', title: '评论名称', width: 100 },
            { field: 'content', title: '内容', width: 300 },
            // { field: 'states', title: '是否通过审核', width: 100 },
            { field: 'time', title: '时间', width: 200 },
            { field: '_id', title: '操作', width: 180,
                formatter: function (value,row,index) {
                    return `<a href="javascript:deleData('${row._id}')">删除</a> <a href="javascript:editData('${row._id}')">修改</a>`;
                }
            }
            ]],
            toolbar:[{
			text:'Add',
			iconCls:'icon-add',
			handler:function(){
                $('#dlg').dialog('open')
            }
		},{
			text:'删除',
			iconCls:'icon-cut',
			handler:function(){
                deleteRows();
                // alert('cut')
            }
		},'-',{
			text:'Save',
			iconCls:'icon-save',
			handler:function(){alert('save')}
		}]

    });
     
     function submitForm(){
       
        $('#ff').form('submit',{
            onSubmit:function(){
                // console.log($(this).form('enableValidation').form('validate'));
                // var formData = $("#ff").serializeJSON();
                if( $(this).form('enableValidation').form('validate') ){
                    // 表单验证成功
                    
                    var formData = $("#ff").serializeJSON();
                    console.log(formData);
                    console.log(formData._id);
                    if(formData._id.length>0){
                        $.ajax({
                            url:'http://localhost:3000/comment/data/' + formData._id,
                            // url:'http://localhost:3000/comment/data/' + formData._id,
                            type:'put',
                            data: formData
                        }).then(res=>{
                            $('#dlg').dialog('close');
                            $("#dg").datagrid("reload");
                        })
                    }else{
                        delete formData._id;
                        // alert(11111111);
                        $.ajax({
                            url:'http://localhost:3000/comment/data',
                            type:'post',
                            data: formData
                        }).then(res=>{
                            $('#dlg').dialog('close');
                            $("#dg").datagrid("reload");
                        })
                    }
                }
                return false;
            }
        });
    }
    function clearForm(){
        $('#ff').form('clear');
    }

    function editData(id){
		$('#ff').form('load', 'http://localhost:3000/comment/data/'+id);
        $('#dlg').dialog('open');
    }

    function deleData(id){
        $.messager.confirm('提示', '你确认删除该数据?', function(r){
				if (r){
					$.ajax({
                        url:'http://localhost:3000/comment/data/' + id,
                        type:'delete'
                    }).then(res=>{
                        $("#dg").datagrid("reload");
                    })
				}
			});
    }
    function deleteRows(){
        $.messager.confirm('提示', '你确认删除该数据?', function(r){
            if(r){
                var selections=$('#dg').datagrid('getSelections');
            console.log(selections.length);
                if(selections.length>0){
                    var ids=[];
                    for(var i=0;i<selections.length;i++){
                        ids.push(selections[i]._id);
                        
                        console.log(selections[i]._id);
                    }
                    $.ajax({
                        url:'http://localhost:3000/comment/data/removes',
                        type:'post',
                        data:{
                            ids:ids.toString()
                        }
                    }).then(res=>{
                        $('#dg').datagrid('reload');
                    })
                }
            }
            }); 
    }
</script>

</html>